<template>
    <div>
    <!-- 上有轮播 下有九宫格 -->
        <!-- <mt-swipe :auto="4000">
          <mt-swipe-item v-for='(img,index) in imgs' :key='index'>
            <img :src="img.img" alt="">
          </mt-swipe-item>
        </mt-swipe> -->
        <swiper :imgs='imgs'/>
        <my-ul>
            <my-li v-for='(grid,index) in grids' :key='index'>
                <router-link :to="grid.router"></router-link>
                <span :class="grid.class"></span>
                <p>{{grid.title}}</p>
            </my-li>
        </my-ul>
        <!-- 在vue中，普通元素，不用使用：key，因为vue会帮你计算一个标签，vue的计算，是有一定的性能损耗，所以建议v-for都给key -->
    </div>
</template>
<script>
export default {
  data () {
    return {
      home: 'home',
      imgs: [],
      grids: [
            {class: 'cms-news',title: '新闻资讯',router: { name: 'news.list' } },
            {class: 'cms-img', title: '图文分享',router: { name: 'photo.list',params:{categoryId:0} }},
            {class: 'cms-show',title: '商品展示',router: { name: 'goods.list',query: {id:1} }},
            {class: 'cms-msg',title: '留言反馈',router: { name: 'news.list' }},
            {class: 'cms-find',title: '搜索资讯',router: { name: 'news.list' }},
            {class: 'cms-ours',title: '联系我们',router: { name: 'news.list' }}
        ]
    }
  },
  created () {
    this.$nextTick(function(){
        this.$axios.get(process.env.API_HOST + '/getlunbo')
        .then(res => {
            this.imgs = res.data.message
            console.log(this.imgs)
        })
        .catch(err => console.log("err",err))
    })
  }
}
</script>
<style scoped>

</style>
